<template>
	<view class="content">
		<div class="swiperDiv">
			<div class="segmentedControl">
				<uni-row>
					<uni-col :span="8">
						<div class="segmented_date">
							2024-8-20
						</div>
					</uni-col>
					<uni-col :span="16">
						<div class="segmentedDiv">
							<uni-row>
								<uni-col :span="12">
									<div :class="!isCurrent?'divLeft active':'divLeft'" @click="clickDiv">
										<image v-if="isCurrent" src="../../static/common/img4.png" mode=""
											class="segmented_img">
										</image>
										<image v-if="!isCurrent" src="../../static/common/img44.png" mode=""
											class="segmented_img">
										</image>
										按日期选择
									</div>
								</uni-col>
								<uni-col :span="12">
									<div :class="isCurrent?'divRight active':'divRight'" @click="clickDiv">
										<image v-if="!isCurrent" src="../../static/common/img5.png" mode=""
											class="segmented_img">
										</image>
										<image v-if="isCurrent" src="../../static/common/img55.png" mode=""
											class="segmented_img">
										</image>
										按医生选择
									</div>
								</uni-col>
							</uni-row>
						</div>
					</uni-col>
				</uni-row>
			</div>

		</div>
		<div class="bot-msg">
			<scroll-view class='scroll-view' scroll-x :show-scrollbar="false" enhanced v-if="!isCurrent">

				<div :class="item.isActive?'scroll-item active2':'scroll-item'" v-for="(item,index) in date"
					:key="index" @click="clickItem(index)">
					<div class="div1">{{item.name}}</div>
					<div class="div2">{{item.time}}</div>
				</div>


			</scroll-view>
			<div class="doctor">
				<div class="doctorMsg" @click="clickDoctor">
					<div class="doctorMsg-top">
						<uni-row :gutter="20">
							<uni-col :span="6">
								<image src="../../static/common/img7.jpg" mode="" class="doctorMsg-top-img"></image>
							</uni-col>
							<uni-col :span="12">
								<div class="div1">
									程晓波
								</div>
								<div class="div2">
									主任医师
									<span style="margin-left:24rpx">45岁</span>
								</div>
							</uni-col>
							<uni-col :span="6">
								<div style="padding-top:24rpx">
									医生简介
									<span>
										<image src="../../static/common/img6.png" mode="" class="doctorMsg-top-img2"></image>
									</span>
								</div>


							</uni-col>
						</uni-row>
					</div>
					<div class="doctorMsg-bottom">
						<span class="span1">剩余：5</span>
						<span class="span2">￥ 81.00</span>
					</div>
				</div>
				<div class="doctorMsg">
					<div class="doctorMsg-top">
						<uni-row :gutter="20">
							<uni-col :span="6">
								<image src="../../static/common/img7.jpg" mode="" class="doctorMsg-top-img"></image>
							</uni-col>
							<uni-col :span="12">
								<div class="div1">
									程晓波
								</div>
								<div class="div2">
									主任医师
									<span style="margin-left:24rpx">45岁</span>
								</div>
							</uni-col>
							<uni-col :span="6">
								<div style="padding-top:24rpx">
									医生简介
									<span>
										<image src="../../static/common/img6.png" mode="" class="doctorMsg-top-img2"></image>
									</span>
								</div>


							</uni-col>
						</uni-row>
					</div>
					<div class="doctorMsg-bottom">
						<span class="span1">剩余：5</span>
						<span class="span2">￥ 81.00</span>
					</div>
				</div>
			</div>


		</div>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				isCurrent: false,
				date: [{
						name: '周日',
						time: '17',
						isActive: false
					},
					{
						name: '周一',
						time: '18',
						isActive: false
					},
					{
						name: '周二',
						time: '19',
						isActive: false
					},
					{
						name: '周三',
						time: '20',
						isActive: false
					},
					{
						name: '周四',
						time: '21',
						isActive: false
					},
					{
						name: '周五',
						time: '22',
						isActive: false
					},
					{
						name: '周六',
						time: '23',
						isActive: false
					},
					{
						name: '周日',
						time: '24',
						isActive: false
					}
				]
			}
		},
		onShow() {

		},
		onLoad(options) {
			console.log(options, "options")
			uni.setNavigationBarTitle({
				title: JSON.parse(options.value).name
			})

		},
		methods: {

			clickDiv() {
				this.isCurrent = !this.isCurrent

			},
			clickItem(val) {
				this.date.forEach((item, index) => {
					if (val == index) {
						item.isActive = true
					} else {
						item.isActive = false
					}
				})
			},
			clickDoctor() {
				this.$common.navigateTo("/pages/register/personal")
			},
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete(this.list);
				// // 此处请求仅为演示，请替换为自己项目中的请求
				//             this.$request.queryList({ pageNo,pageSize }).then(res => {
				// 	// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
				//             	this.$refs.paging.complete(res.data.list);
				//             }).catch(res => {
				//             	// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				//             	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				//             	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				//             	this.$refs.paging.complete(false);
				//             })
			}
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.swiperDiv {
		height: 500rpx;

		background-color: #1648ce;
	}

	.segmentedControl {
		padding-top: 36rpx;
		padding: 36rpx 20rpx;

	}

	.segmented_date {
		padding-top: 20rpx;
		padding-left: 20rpx;
		font-size: 32rpx;
		color: #F2F6FE;

	}

	.bot-msg {
		position: absolute;
		top: 144rpx;
		width: 100%;
		height: calc(100% - 144rpx);
		background-color: #fff;
		border-top-right-radius: 70rpx;
	}

	.scrollView {
		height: 100%;
		width: 100%;
	}

	.scroll-view {
		display: flex;
		white-space: nowrap;
		height: 124rpx;
		width: 94%;
		margin: 0 auto;
		margin-top: 36rpx;
	}


	.scroll-item {
		width: 88rpx;
		height: 120rpx;
		line-height: 60rpx;
		color: #1648CE;
		text-align: center;
		display: inline-block;
		border-radius: 24rpx;
		margin-right: 12rpx;
		border: 2rpx solid #1648CE;
	}

	.scroll-item .div1 {

		font-size: 24rpx;
	}

	.scroll-item .div2 {

		font-size: 48rpx;
		font-weight: 600;
	}

	/deep/ .uni-row {
		height: 96%;
		width: 100%;
	}


	.segmented {
		position: relative;
	}

	.segmentedDiv {
		color: #FFFFFF;
		font-size: 28rpx;
	}

	.segmentedDiv .divLeft {
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		border: 1rpx solid #FFFFFF;
		border-radius: 20rpx 0px 0px 20rpx;
	}

	.segmentedDiv .divRight {
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		border: 1rpx solid #FFFFFF;
		border-left: none;
		border-radius: 0px 20rpx 20rpx 0px;
	}

	.active {
		color: #1648CE;
		font-weight: 600;
		background-color: #F2F6FE;
	}

	.active2 {
		color: #fff;
		background-color: #1648CE;
	}

	.segmented_img {
		width: 36rpx;
		height: 36rpx;
		margin-bottom: 4rpx;
		margin-right: 12rpx;
		vertical-align: middle;

	}

	.doctor {
		width: 94%;
		margin: 0 auto;
		margin-top: 36rpx;
	}

	.doctorMsg {
		width: 100%;
		margin-bottom: 24rpx;
		border-radius: 12px 12px 12px 12px;
		border: 1px solid #1648CE;
	}

	.doctorMsg-top {
		padding: 36rpx;
		border-bottom: 2rpx solid #F2F4F5;
	}

	.doctorMsg-top-img {
		width: 144rpx;
		height: 144rpx;
		border-radius:24rpx;
	}

	.doctorMsg-top-img2 {
		vertical-align: middle;
		margin-bottom: 4rpx;
		margin-left: 4rpx;
		width: 24rpx;
		height: 24rpx;
	}

	.doctorMsg-top /deep/ .uni-col-6 {
		font-size: 24rpx;
	}

	.doctorMsg-top /deep/ .uni-col-12 {
		margin-top: 24rpx;

	}

	.doctorMsg-top /deep/ .uni-col-12 .div1 {
		padding-left: 20rpx;
		margin-bottom: 8rpx;
		font-size: 34rpx;
		color: #112950;
	}

	.doctorMsg-top /deep/ .uni-col-12 .div2 {
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #8E9AAB;
	}

	.doctorMsg-bottom {
		text-align: right;
		margin-right: 20rpx;
		height: 96rpx;
		line-height: 96rpx;
	}

	.doctorMsg-bottom .span1 {
		color: #1648CE;
		font-size: 28rpx;
		font-weight: 600;
	}

	.doctorMsg-bottom .span2 {
		color: #fff;
		font-size: 28rpx;
		margin-left: 48rpx;
		padding: 6rpx 20rpx;
		background-color: #1648CE;
		border-radius: 6px 6px 6px 6px;
	}
</style>